<template>
    <div class="layerRtb layerRtb-threecolumn">
        <three-title :title="{name:'地区'}"></three-title>
        <div class="layerRtb-scroll thinScroll" v-scrollHeight="137">
            <!-- <div class="analyItem">
                <p class="analyItemTit tx-center">地区</p>
                <div class="analyItemCon">
                    <span class="provinceClass col-md-11">
                        <span class="cLightGray pr8" v-for="(item,index) in sheng" :key="index">
                            <input name="cityName" type="checkbox" :value="item.diccode" v-model="xuanzhong" @change="zhuKuaByCityId($event)" />{{item.dicname}}
                        </span>
                    </span>
                </div>
            </div>
            <div class="analyItem">
                <p class="analyItemTit tx-center">地区</p>
                <div class="analyItemCon">
                    <span class="provinceClass col-md-11">
                        <span class="cLightGray pr8" v-for="(item,index) in area" :key="index">
                            <input name="cityNam" type="checkbox" :value="item.dq_id" v-model="xiaColony" @change="zhuShiByCityId($event)" />{{item.dq_name}}
                        </span>
                    </span>
                </div>
            </div>
            <div v-if="this.dqIds == this.dqIds">
                <div class="analyItem" v-for="(item,index) in zhuCity" :key="index">
                    <p class="analyItemTit tx-center">{{item[0].cityName}}</p>
                    <div class="analyItemCon">
                        <span class="provinceClass" v-for="(otem,ondex) in item " :key="ondex">

                            <input name="cityNam" type="checkbox" :value="otem.dq_id" v-model="colony" @change="zhuQuByCityId($event,item[0].cityName)" />{{otem.dq_name}}
                        </span>
                    </div>
                </div>
            </div>

            <div v-if="this.dqIds == this.dqIds">
                <div class="analyItem" v-for="(item,index) in cityQuArray" :key="index">
                    <p class="analyItemTit tx-center">{{item[0].Name}}</p>
                    <div class="analyItemCon">
                        <span class="provinceClass" v-for="(items,indexs) in item" :key="indexs"> {{item.ParentId}}

                            <input name="cityNam" type="checkbox" :value="items.Id" v-model="quColony" @change="zhuQuByquId($event)" />{{items.city}}
                        </span>
                    </div>
                </div>
            </div> -->
            <div class="analyItem">
                <p class="analyItemTit tx-center" :class="((stageInfo.province=== undefined || stageInfo.province=== '' || stageInfo.province=== null) ||
                (stageInfo.city=== undefined || stageInfo.city=== '' || stageInfo.city=== null) ||
                (this.siName=== undefined || this.siName === '' || this.siName === null)) ? '' : 'analyLightGreen'">所在地区</p>
                <div class="analyItemCon">
                    <p class="col-md-4">
                        <span>省</span>
                        <select id="projectSheng"  @change="shengChange()" class="widthB60" style="display: inline-block;width: 100px;" v-model="userInfo.u_shengId">
                            <option value="0">选择省</option>
                            <option  v-for="(item,index) in shengArry" :key="index" :data-code="item.code" :value="item.aid">{{item.name}}</option>
                        </select>
                    </p>
                    <p class="col-md-4">
                        <span>市</span>
                        <select id="city" name="s_city" style="display: inline-block;width: 100px;" v-model="userInfo.u_shiId">
                                <option value="0">选择市</option>
                            <option  v-for="(item,index) in shiArry" :key="index" :data-code="item.code" :value="item.aid">{{item.name}}</option>
                        </select>
                    </p>
                    <p class="col-md-4 ng-scope">
                        <span>分司</span>
                        <select id="company" name="inductionArea" style="display: inline-block;width: 100px;" v-model="userInfo.region_id" class="widthB60 inductionArea inductionArea2">
                              <option value="0">选择分司</option>
                            <option  v-for="(item,index) in companyArry" :key="index"  :value="item.regionId">{{item.regionName}}</option>
                        </select>
                    </p>
                </div>
            </div>
        </div>
        <div class="layerRtb-footer">
            <div class="analyItem">
                <p class="analyItemTit tx-center">综合</p>
                <div class="analyItemCon tx-center">
                    <input type="button" value="提交" class="uiBtn-normal uiBtn-blue SubmitBtn" @click="submit()">

                    <p class="fl">
                        <span v-if="(stageInfo.province=== undefined || stageInfo.province=== '' || stageInfo.province=== null) ||
                (stageInfo.city=== undefined || stageInfo.city=== '' || stageInfo.city=== null) ||
                (this.siName=== undefined || this.siName === '' || this.siName === null)" class="circlemark circlemark-lightRed">待</span>
                        <span v-else class="circlemark circlemark-lightGreen">全</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>import { mapGetters, mapMutations } from 'vuex'
// eslint-disable-next-line standard/object-curly-even-spacing
// GetPersonnelMsgByCondition
// import { getPmWorkAreaByUid, getAdressByUid, loadTransCity, GetProvinceMsg, getCityMsgByProvinceId, getCountyMsgByCityId, getAllCity, getDiquByCity, updateUserInfoMappingMsg, getPmUserInfoMatchCity } from '../../Resources/Api/index'
import { GetAreaList, OperateAppUser, GetRegionList, updUserInfoNew } from '../../Resources/Api/index'
export default {
    data () {
        return {
            userInfo: {},
            flg: 1,
            siName: '', // 分司名称
            provinceName: '',
            cityName: '',
            stageInfo: {},
            province: 0, // 省id
            city: 0, // 市id
            shengArry: [], // 所有省份
            shiArry: [], // 所有市
            companyArry: [],
            company: 0 // 分司的id
            // userInfo: {},
            // monthNow: 0, // 工龄
            // arrery: [], // 用来判断是否选择了三个
            // adress: [], // 详细地址
            // sheng: [], // 跨地区
            // zhuSheng: [], // 现住址的省
            // zhuShi: [], // 现住址的市
            // zhuQu: [], // 现住址的区
            // pemdmert: '', // 绑定的现住址的省
            // cityId: '', // 绑定的现住址的市
            // quName: '', // 绑定的现住址的区
            // area: [], // 地区（分司）
            // zhuCity: [], // 点击地区出现的分区
            // dqIds: [], // 将分区进行拼接
            // zhuCitymens: {}, // 将分司赋值
            // AddressDetail: '', // 具体地址
            // ontype: '', // 获取的类型id 拼接
            // // typeValue: '', // 截取，之后的类型id
            // dqIde: '', // 截取之后的地区id
            // siIds: [], // 获取的分司id 拼接
            // quIds: [], // 获取分区拼接
            // kuaIds: [], // 获取的跨地区id 拼接
            // cityQuId: [], // 获取市底下的区Id
            // cityQuArray: [], // 市底下的区Id 的数组
            // siIdsNameArray: [], // 各个地区详情的数组
            // huixian: {},
            // workType: [],
            // xuanzhong: [],
            // colony: [],
            // quColony: [],
            // xiaColony: [],
            // // currentType: [],
            // quObject: {},
            // typeArr: [] // 所有类型的数组
        }
    },
    created () {
        this.userInfo = this.$route.query.userInfo
        // this.siName = this.$route.query.siName
        // this.provinceName = this.$route.query.province
        // this.cityName = this.$route.query.city
        // this.workTypeArray()
        // this.PmWorkAreaByUid()
        // // this.GetPersonnelMsgByCondition() // 项目经理信息
        // this.getAdressByUid() // 详细地址
        // this.loadTransCity() // 跨地区
        // this.GetProvinceMsg() // 省
        // this.AllCity()// 地区 updateUserInfoMappingMsg
        this.GetAreaList() // 省、市
        this.GetRegionList() // 分司
    },
    computed: {
        ...mapGetters(['leftInfo', 'updatePlate', 'rx'])
    },
    methods: {
        ...mapMutations({
            setUpdateLeft: `SET_UPDATE_LEFT`
        }),
        // OperateAppUser () {
        //     OperateAppUser({
        //         app_id: this.leftInfo.rs_app_id,
        //         u_sheng: projectSheng,
        //         u_shengId: projectShengId, // 省id
        //         u_shi: city,
        //         u_shiId: cityId,
        //         post: 4,
        //         u_xian: null,
        //         u_xianId: null,
        //         u_qudaoinput: this.channelInput,
        //         region_id: company
        //     }).then((results) => {
        //         if (results) {

        //         }
        //     }).catch(err => {
        //         console.log(err)
        //     })
        // },
        submit () {
            // 获取省的名字
            var projectSheng = $('#projectSheng')
                .find('option:selected')
                .text()
                // 获取省的ID
            var projectShengId = $('#projectSheng').val()
            // 获取市的名字
            var city = $('#city')
                .find('option:selected')
                .text()
            // 获取市的ID
            var cityId = $('#city').val()
            // 获取分司的值
            var company = $('#company').val()
            updUserInfoNew({
                uid: this.leftInfo.uid,
                province: projectSheng,
                city: city,
                inductionArea: company
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    OperateAppUser({
                        app_id: this.leftInfo.rs_app_id,
                        u_sheng: projectSheng,
                        u_shengId: Number(projectShengId), // 省id
                        u_shi: city,
                        u_shiId: Number(cityId),
                        region_id: Number(company)
                    }).then((results) => {
                        if (Number(results.data.StatusCode) === 0) {
                            layer.msg('修改成功')
                            this.setUpdateLeft()
                            this.$router.push(this.$route.matched[1].path)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }
            }).catch(err => {
                console.log('修改地区信息失败' + err)
            })
        },
        // 获取省
        GetAreaList () {
            GetAreaList().then(results => {
                if (results.status === 200) {
                    this.shengArry = results.data
                    this.shengArry.forEach(sheng => {
                        if (sheng.aid === Number(this.userInfo.u_shengId)) {
                            this.shengChangeCity(sheng.code)
                            return 1
                        }
                    })
                }
            }).catch(error => { console.log(error) })
        },
        // 获取市
        shengChangeCity (value) {
            GetAreaList({
                code: value
            }).then(results => {
                if (results.status === 200) {
                    this.shiArry = results.data
                    this.shiArry.forEach(city => {
                        if (city.name === this.stageInfo.city) {
                            this.city = city.aid
                            return this.city
                        }
                    })
                }
            }).catch(error => { console.log(error) })
        },
        // 获取市
        shengChange () {
            let code = $('#projectSheng').find('option:selected').attr('data-code')
            GetAreaList({
                code: code
            }
            ).then(results => {
                if (results.status === 200) {
                    this.shiArry = results.data
                }
            }).catch(error => { console.log(error) })
        },
        // 分司
        GetRegionList () {
            GetRegionList().then(results => {
                if (results.data.StatusCode === 0) {
                    this.companyArry = results.data.Body
                    // this.companyArry.forEach(company => {
                    //     if (company.regionName === this.siName) {
                    //         this.company = company.regionId
                    //         return this.company
                    //     }
                    // })
                }
            }).catch(error => { console.log(error) })
        }
        // isShow () {

        // },
        // AllCity () {
        //     getAllCity({

        //     }).then(res => {
        //         this.area = res.data.Body
        //     }).catch(err => {
        //         console.log(err)
        //     })
        // },
        // GetPersonnelMsgByCondition () {
        //     GetPersonnelMsgByCondition({
        //         uid: this.leftInfo.uid,
        //         appCardNo: this.leftInfo.app_cardNo
        //     }).then(res => {
        //         this.userInfo = res.data.Body
        //         this.monthNow = this.datemonth(res.data.Body[0].workDate, new Date())
        //     }).catch(err => {
        //         console.log(err)
        //     })
        // },
        // getAdressByUid () {
        //     getAdressByUid({
        //         uid: this.leftInfo.uid
        //     }).then(res => {
        //         this.adress = res.data.Body
        //         if (res.data.Body[0]) {
        //             this.pemdmert = res.data.Body[0].province_id

        //             this.cityId = res.data.Body[0].city_id

        //             this.quName = res.data.Body[0].county_value

        //             this.AddressDetail = res.data.Body[0].now_address
        //         } else {
        //             this.pemdmert = 0

        //             this.cityId = 0

        //             this.quName = 0

        //             this.AddressDetail = ''
        //         }
        //         this.zhuShiQu()
        //         this.zhuQuJu()
        //     }).catch(err => {
        //         console.log(err)
        //         this.$message('失败')
        //     })
        // },
        // loadTransCity () {
        //     loadTransCity({

        //     }).then(res => {
        //         this.sheng = res.data.Body
        //     }).catch(err => {
        //         console.log(err)
        //         this.$message('失败')
        //     })
        // },
        // GetProvinceMsg () {
        //     GetProvinceMsg({

        //     }).then(res => {
        //         this.zhuSheng = res.data.Body
        //         this.zhuShiQu()
        //     }).catch(err => {
        //         console.log(err)
        //         this.$message('失败')
        //     })
        // },

        // 计算日期之间的月数
        // datemonth (date1, date2) {
        //     // 拆分年月日
        //     date1 = date1.split('-')
        //     // 得到月数
        //     date1 = parseInt(date1[0]) * 12 + parseInt(date1[1])
        //     // 得到月数
        //     this.monthNow = parseInt(date2.getFullYear() * 12) + parseInt(date2.getMonth() + 1)

        //     var m = Math.abs(this.monthNow - date1)

        //     return m
        // },
        // zhuShiQu (event, flag) {
        //     if (flag === 1) {
        //         this.cityId = ''
        //         this.quName = ''
        //         this.AddressDetail = ''
        //     }

        //     getCityMsgByProvinceId({
        //         provinceId: this.pemdmert
        //     }).then(res => {
        //         this.zhuShi = res.data.Body
        //         this.zhuQuJu()
        //     }).catch(err => {
        //         console.log(err)
        //         this.$message('提交失败')
        //     })
        // },
        // zhuQuJu (event, flag) {
        //     if (flag === 1) {
        //         this.quName = ''
        //         this.AddressDetail = ''
        //     }
        //     getCountyMsgByCityId({
        //         cityId: this.cityId
        //     }).then(res => {
        //         this.zhuQu = res.data.Body
        //     }).catch(err => {
        //         console.log(err)
        //         this.$message('提交失败')
        //     })
        // },
        // zhuShiByCityId (event) { /* 地区点击显分司 */
        //     if (event.target.checked) {
        //         this.dqIds.push(Number(event.target.value))
        //         this.getDiquByCity(event.target.value)
        //     } else {
        //         if (this.dqIds.length > 0) {
        //             const currentIndex = this.dqIds.indexOf(Number(event.target.value))
        //             if (currentIndex >= 0) {
        //                 this.dqIds.splice(currentIndex, 1)
        //             }
        //         }
        //         const value = event.target.value
        //         let ArrayIndex
        //         this.zhuCity.forEach((item, index) => {
        //             const currentIndex = item.findIndex((item) => {
        //                 return item.dq_lishu === Number(value)
        //             })
        //             if (currentIndex >= 0) {
        //                 ArrayIndex = index
        //             } else {
        //                 return false
        //             }
        //         })
        //         this.zhuCity.splice(ArrayIndex, 1)
        //     }
        // },
        // // 地区显示
        // getDiquByCity (value) {
        //     getDiquByCity({
        //         dqId: value
        //     }).then(res => {
        //         res.data.Body.forEach(item => {
        //             this.zhuCitymens = item
        //         })
        //         if (this.zhuCitymens.length > 0) {
        //             this.zhuCity.push(this.zhuCitymens)
        //         }
        //     }).catch(err => {
        //         console.log(err)
        //         this.$message('提交失败')
        //     })
        // },

        // zhuQuByCityId (event, name) {
        //     if (event.target.checked) {
        //         this.siIds.push(Number(event.target.value))
        //         this.siIdsNameArray.push(name)
        //         // 判断二级地区数组是否有值
        //         if (this.cityQuArray.length > 0) {
        //             let currentIndex
        //             // 遍历二级分类
        //             this.cityQuArray.forEach(element => {
        //                 // 找出对应的父类地区的索引位置
        //                 currentIndex = element.findIndex((item) => { return item.ShortName === name })
        //             })
        //             // 有
        //             if (currentIndex >= 0) {

        //             } else {
        //                 //
        //                 this.getCityQuArrayDate(event.target.value)
        //             }
        //         } else {
        //             this.getCityQuArrayDate(event.target.value)
        //         }
        //     } else {
        //         if (this.siIds.length > 0) {
        //             const currentIndex = this.siIds.findIndex((item) => { return item === Number(event.target.value) })
        //             const currentNameIndex = this.siIdsNameArray.findIndex((item) => { return item === name })
        //             if (currentIndex >= 0) {
        //                 this.siIds.splice(currentIndex, 1)
        //             }
        //             if (currentNameIndex >= 0) {
        //                 this.siIdsNameArray.splice(currentNameIndex, 1)
        //             }
        //         }
        //         const filterArray = this.siIdsNameArray.filter((item) => {
        //             return item === name
        //         })
        //         if (filterArray.length === 0) {
        //             let ArrayIndex
        //             this.cityQuArray.forEach(element => {
        //                 ArrayIndex = element.findIndex((item) => { return item.ShortName === name })
        //             })
        //             this.cityQuArray.splice(ArrayIndex, 1)
        //         } else {

        //         }
        //     }
        //     // event.target.value = !event.target.value;
        // },
        // // 将获取到的区进行拼接
        // zhuQuByquId (event) {
        //     if (event.target.checked) {
        //         this.quIds.push(Number(event.target.value))
        //         this.getCityQuArrayDate(event.target.value)
        //     } else {
        //         if (this.quIds.length > 0) {
        //             const currentIndex = this.quIds.indexOf(Number(event.target.value))
        //             if (currentIndex > 0) {
        //                 this.quIds.splice(currentIndex, 1)
        //             }
        //             this.cityQuArray = []
        //         }
        //     }
        // },
        // // 获取市底下的区的数组
        // getCityQuArrayDate (value) {
        //     getPmUserInfoMatchCity({
        //         area: value
        //     }).then(res => {
        //         if (res.data.StatusCode === 0) {
        //             res.data.Body.forEach(item => {
        //                 this.quObject = item
        //             })
        //             if (this.quObject.length > 0) {
        //                 const current = this.cityQuArray.findIndex((item) => item[0].Name === this.quObject[0].Name)
        //                 if (current >= 0) {
        //                     // 有
        //                 } else {
        //                     // 无
        //                     this.cityQuArray.push(this.quObject)
        //                 }
        //             }
        //         }
        //     }).catch(err => {
        //         console.log(err)
        //     })
        // },
        // zhuKuaByCityId (event) {
        //     if (event.target.checked) {
        //         this.kuaIds.push(Number(event.target.value))
        //     } else {
        //         if (this.kuaIds.length > 0) {
        //             const currentIndex = this.kuaIds.indexOf(Number(event.target.value))
        //             if (currentIndex >= 0) {
        //                 this.kuaIds.splice(currentIndex, 1)
        //             }
        //         }
        //     }
        // },
        // MappingButton () {
        //     updateUserInfoMappingMsg({
        //         uid: this.leftInfo.uid, // uid
        //         // typeValue: this.typeArr.join(','), // 类型
        //         AddressCityId: this.cityId, // 市id
        //         AddressProvinceId: this.pemdmert, // 省
        //         AddressCountyId: this.quName, // 区
        //         AddressDetail: this.AddressDetail, // 具体地址
        //         checkProvince: this.kuaIds.join(','), // 跨地区  多个用 , 分割
        //         checkCity: this.dqIds.join(','), // 匹配地区  多个用 , 分割
        //         checkRegion: this.siIds.join(','), // 分司   多个用 , 分割
        //         checkSubarea: this.quIds.join(',')// 分区   多个用 , 分割

        //     }).then(res => {
        //         this.$message(res.data.Body)
        //     }).catch(err => {
        //         console.log(err)
        //         this.$message('提交失败')
        //     })
        // },
        // PmWorkAreaByUid () {
        //     let _this = this
        //     _this.huixian = {}
        //     getPmWorkAreaByUid({
        //         uid: this.leftInfo.uid
        //     }).then(result => {
        //         this.huixian = result.data.Body
        //         this.xuanzhong = this.huixian.kuaArea !== undefined ? this.huixian.kuaArea : []
        //         this.colony = this.huixian.siArea !== undefined ? this.huixian.siArea : []
        //         this.xiaColony = this.huixian.diArea !== undefined ? this.huixian.diArea : []/* 地区 */
        //         this.quColony = this.huixian.quSubarea !== undefined ? this.huixian.quSubarea : [] /* 分区 */
        //         // this.currentType = this.huixian.typeValue.typeValue.split(',') /* typeValue='1-100,1-200' */
        //         // this.splitValueType(this.currentType)
        //         // this.arrery = this.currentType
        //         this.siIds = this.colony
        //         this.kuaIds = this.xuanzhong
        //         this.dqIds = this.xiaColony
        //         this.quSubarea = this.quColony

        //         if (this.dqIds.length === 0) {
        //             this.colony = []
        //             this.siIds = []
        //         }
        //         this.xiaColony.forEach(item => {
        //             this.getDiquByCity(item)
        //         })
        //         if (this.xiaColony.length > 0) {
        //             this.siIds.forEach(item => {
        //                 this.getCityQuArrayDate(item)
        //             })
        //         }
        //     })
        // }


    }
}

</script>
